<template>
  <div class="index">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="今日提醒" name="1">
        <div class="table">
          <el-table
            :data="tableData"
            border
            header-row-class-name="my-tabel-header"
            :header-row-style="{ height: 50 + 'px' }"
            :row-style="{ height: 50 + 'px' }"
            :cell-style="{ padding: 0 + 'px' }"
            stripe
            style="width: 100%"
          >
            <el-table-column prop="time" label="下次跟进时间">
            </el-table-column>
            <el-table-column prop="customerName" label="目标客户">
            </el-table-column>
            <el-table-column prop="status" label="跟进状态"> </el-table-column>
            <el-table-column prop="creater" label="创建人"> </el-table-column>
            <el-table-column prop="address" label="操作">
              <template #default="scope">
                <el-button
                  @click="handleLook(scope.row)"
                  type="text"
                  size="small"
                  >标记完成</el-button
                >
                <el-button
                  @click="handleEdit(scope.row)"
                  type="text"
                  size="small"
                  >跟进</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="明日提醒" name="2">
        <div class="table">
          <el-table
            :data="tableData"
            border
            header-row-class-name="my-tabel-header"
            :header-row-style="{ height: 50 + 'px' }"
            :row-style="{ height: 50 + 'px' }"
            :cell-style="{ padding: 0 + 'px' }"
            stripe
            style="width: 100%"
          >
            <el-table-column prop="time" label="下次跟进时间">
            </el-table-column>
            <el-table-column prop="customerName" label="目标客户">
            </el-table-column>
            <el-table-column prop="status" label="跟进状态"> </el-table-column>
            <el-table-column prop="creater" label="创建人"> </el-table-column>
            <el-table-column prop="address" label="操作">
              <template #default="scope">
                <el-button
                  @click="handleLook(scope.row)"
                  type="text"
                  size="small"
                  >标记完成</el-button
                >
                <el-button
                  @click="handleEdit(scope.row)"
                  type="text"
                  size="small"
                  >跟进</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已过期提醒" name="3">
        <div class="table">
          <el-table
            :data="tableData"
            border
            header-row-class-name="my-tabel-header"
            :header-row-style="{ height: 50 + 'px' }"
            :row-style="{ height: 50 + 'px' }"
            :cell-style="{ padding: 0 + 'px' }"
            stripe
            style="width: 100%"
          >
            <el-table-column prop="time" label="下次跟进时间">
            </el-table-column>
            <el-table-column prop="customerName" label="目标客户">
            </el-table-column>
            <el-table-column prop="status" label="跟进状态"> </el-table-column>
            <el-table-column prop="creater" label="创建人"> </el-table-column>
            <el-table-column prop="address" label="操作">
              <template #default="scope">
                <el-button
                  @click="handleLook(scope.row)"
                  type="text"
                  size="small"
                  >标记完成</el-button
                >
                <el-button
                  @click="handleEdit(scope.row)"
                  type="text"
                  size="small"
                  >跟进</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="my-dialog">
      <el-dialog width="800px" title="跟进" v-model="innerVisible">
        <el-input
          type="textarea"
          :rows="6"
          placeholder="请输入内容"
          v-model="newRecord.textarea"
          show-word-limit
          maxlength="500"
          resize="none"
        >
        </el-input>
        <div class="radio">
          <span
            class="e-radio"
            :class="[curRecordType == item.value ? 'active' : '']"
            :label="item.value"
            v-for="(item, index) in options3"
            :key="index"
            @click="curRecordType = item.value"
            >{{ item.label }}</span
          >
        </div>
        <div class="next">
          下次跟进？<el-switch
            v-model="newRecord.isNext"
            active-color="#ff4949"
            inactive-color="#dcdfe6"
          ></el-switch>
        </div>
        <div class="time" v-show="newRecord.isNext">
          <el-date-picker
            v-model="newRecord.time"
            :picker-options="pickerOptions"
            size="mini"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="innerVisible = false" size="mini"
              >取 消</el-button
            >
            <el-button type="primary" @click="onSave" size="mini"
              >确 定</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { getFollowRemindVOList } from "../assets/javascript/api/customer.js";
export default defineComponent({
  name: "Home",
  data() {
    return {
      activeName: "1",
      innerVisible: false,
      newRecord: {
        textarea: "",
        type: "1",
        isNext: false,
        time: "",
      },
      pageSize: 10,
      pageNum: 1,
      total: 0,
      tableData: [
        {
          time: "2021/6/6 10:30",
          customerName: "张三",
          status: "等待跟进",
          creater: "李四",
        },
      ],
      curRecordType: "1",
      options3: [
        {
          value: "1",
          label: "微信沟通",
        },
        {
          value: "2",
          label: "QQ沟通",
        },
        {
          value: "3",
          label: "其他",
        },
        {
          value: "4",
          label: "打电话",
        },
        {
          value: "5",
          label: "发邮件",
        },
        {
          value: "6",
          label: "发短信",
        },
        {
          value: "7",
          label: "见面拜访",
        },
        {
          value: "8",
          label: "汇报记录",
        },
        {
          value: "9",
          label: "会晤",
        },
        {
          value: "10",
          label: "活动",
        },
        {
          value: "11",
          label: "商务宴请",
        },
      ],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleClick() {},
    //点击跟进
    handleEdit() {
      this.innerVisible = true;
    },
    //获取列表
    async getList() {
      let params = {
        followRemindStatus: this.activeName,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };

      const res = await getFollowRemindVOList(params);
      console.log(res);
      // if (res.code == 200) {
      //   const { data } = res;
      //   this.tableData = data;
      //   this.total = res.total;
      // }
    },
    //切换每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    //切换当前页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    onSave() {},
  },
});
</script>
<style lang="less" scoped>
.index {
  padding: 30px;
}
.table {
  /deep/.my-tabel-header {
    > th {
      background: #f4f4f4;
      > .cell {
        font-weight: bold;
        color: #000;
      }
    }
  }
}
.my-dialog {
  /deep/.el-dialog__header {
    padding: 10px 20px;
    background: #eeecec;
    font-weight: 600;
    color: #000;
  }
  /deep/.el-dialog .el-dialog__header .el-dialog__title {
    font-size: 14px;
  }
  /deep/.el-dialog__headerbtn {
    top: 12px;
  }
  /deep/.el-dialog__footer {
    border-top: none;
  }
}
.radio {
  margin-top: 20px;
  .e-radio {
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    &:hover {
      color: #b53434;
    }
  }
  .active {
    background: #b53434;
    color: #fff;
    &:hover {
      color: #fff;
    }
  }
}
.next {
  margin-top: 20px;
}
.time {
  margin-top: 20px;
}
.page {
  margin-top: 20px;
  text-align: right;
}
</style>